<template>
  <view v-if="!hasLogin" class="empty need_login">
    <u-empty text="未登录" mode="permission">
      <button size="mini" slot="bottom" class="go-to-login"
              @click="gotoPath('/pages/login/index?from=coupon_list' + serializeParam(options),false)">请先登录
      </button>
    </u-empty>
  </view>
  <view v-else class="container coupon-box">
    <view class="coupon-list" v-if="list.length">
      <view class="coupon-item" v-for="(item, index) in list" :key="index">
        <view :class="'item-wrapper color__' + (item.state.value ? item.color.text : 'gray')">
          <view class="coupon-type">{{ item.coupon_type.text }}</view>
          <view class="tip dis-flex flex-dir-column flex-x-center">
            <view v-if="item.coupon_type.value == 10">
              <text class="f-30">￥</text>
              <text class="money">{{ item.reduce_price }}</text>
            </view>
            <text class="money" v-if="item.coupon_type.value == 20">{{ item.discount }}折</text>
            <text class="pay-line">满{{ item.min_price }}元可用</text>
          </view>
          <view class="split-line"></view>
          <view class="content dis-flex flex-dir-column flex-x-between">
            <view class="title">{{ item.name }}</view>
            <view class="bottom dis-flex flex-y-center">
              <view class="time flex-box">
                <text v-if="item.expire_type == 10">领取{{ item.expire_day }}天内有效</text>
                <text v-if="item.expire_type == 20">{{ item.start_time.text }}~{{ item.end_time.text }}</text>
              </view>
              <view class="receive" v-if="item.state.value===1" @tap.stop.prevent="receive"
                    :data-coupon-id="item.coupon_id">
                <text>立即领取</text>
              </view>
              <view class="receive state" v-else>
                <text>{{ item.state.text }}</text>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
    <view v-else-if="notcont">
      <view class="bsshop-notcont">
        <u-empty text="暂无数据" mode="list"></u-empty>
      </view>
    </view>
  </view>
</template>

<script>
import coupon_api from "@/common/coupon_api";

export default {
  data() {
    return {
      // 优惠券列表
      list: [],
      // show
      notcont: false
    };
  }
  /**
   * 生命周期函数--监听页面加载
   */,
  onLoad: function (options) {
    // 当前页面参数
    this.options = options;
  },
  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
    // 获取优惠券列表
    this.getCouponList();
  },
  onPullDownRefresh() {
    this.getCouponList();
    setTimeout(() => {
      uni.stopPullDownRefresh()
    }, 2000)
  },
  methods: {
    /**
     * 获取优惠券列表
     */
    getCouponList: function () {
      let that = this;
      coupon_api.list({from: 'all'}).then(res => {
        if (res.code === 0) {
          that.setData({
            list: res.data.list,
            notcont: !res.data.list.length > 0
          });
        }
      })
    },

    /**
     * 立即领取
     */
    receive: function (e) {
      let that = this;
      let couponId = e.currentTarget.dataset.couponId;
      if (!this.hasLogin) {
        return this.show_msg('请先登录', 'none', 1500, function () {
          uni.navigateTo({
            url: '/pages/login/index?from=coupon'
          })
        })
      }
      coupon_api.add({
        coupon_id: couponId
      }).then(res => {
        that.show_msg(res.msg, 'none', 1500, function () {
          if (res.code === 0) {
            that.getCouponList();
          }
        })
      })
    }
  }
};
</script>
<style lang="scss" scoped>
@import './index.scss';
</style>
